<template>
	<view class="schedule">
		<view class="tab_nav">
			<nav-bar
				nav_btn="back"
				:index="index"
				:title="title"
				@onPicker="onPicker"
				:showPicker="showPicker"
				:color="color"
				:placeholder="placeholder"
				:list="list"
				:auto_img="image"
				:background="background"
			></nav-bar>
		</view>
		<view class="header_box w100">
			<view class="list_box flexjus">
				<view class="active_box" v-for="(item, index) in activeList" :key="index" @click="active(index)">
					<view :class="[listIndex == index ? 'list_active' : 'list_txt', 's30', 'family', 'f500']">
						{{ item.txt }}
					</view>
					<view class="list_line_box" v-if="listIndex == index"></view>
				</view>
			</view>
		</view>
		<view class="schedule_box w100 flexjus" @click="onSeeSchedule">
			<view class="flex">
				<view class="schedule_icon">
					<image class="w100 h100" :src="icon.dateIcon" mode=""></image>
				</view>
				<view class="schedule_txt s24 familytow fblod">查看档期</view>
			</view>
			<view class="left_jian">
				<image class="w100 h100" :src="icon.whLeftJianIcon" mode=""></image>
			</view>
		</view>
		<view class="bot_list_box">
			<view v-if="teacherList.length == 0" style="font-size: 24rpx; color: #ccc; text-align: center; padding-top: 30rpx">暂无数据!</view>
			<view class="list_center flexjus" v-for="(item, index) in teacherList" :key="index">
				<view class="flex" style="flex: 1">
					<view class="avatar_box">
						<image class="w100 h100" :src="item.image_src" mode=""></image>
					</view>
					<view class="name_detail_box" style="flex: 1">
						<view class="name_txt s32 family f500">
							{{ item.name }}
						</view>
						<view class="detail_txt family s24 f400">
							{{ item.t_type }}
						</view>
					</view>
				</view>
				<view @click="goSchedule(item)" class="detail_box flex" style="margin-left: 10rpx">
					<view class="see_detail_txt s24 family f400">查看详情</view>
					<view class="left_jian_box">
						<image class="w100 h100" :src="icon.detailJianIcon" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			title: '',
			image: '../static/tab_jian.png',
			color: 'black',
			showPicker: true,
			background: '#ffffff',
			list: [
				{
					shopname: '请选择店铺'
				}
			],
			shopId: 0,
			index: 0,
			activeList: [
				{
					txt: '摄影师'
				},
				{
					txt: '造型师'
				}
			],
			listIndex: 0,
			teacherList: [],
			page: 1,
			lastPage: 0
		};
	},
	computed: {
		...mapState(['icon'])
	},
	onLoad(options) {
		let obj = JSON.parse(options.obj);
		this.shopId = obj.shopId;
		this.index = obj.index;
		this.getShopList();
	},
	onShow() {
		this.page = 1;
		this.getTeacherList();
	},
	onReachBottom() {
		if (this.page >= this.lastPage) {
			this.$wanlshop.msg('我是有底线的!');
		} else {
			this.page++;
			this.getTeacherList();
		}
	},
	methods: {
		//获取店铺列表
		getShopList() {
			this.$request({
				url: 'wedding/shop_list',
				method: 'POST',
				data: {
					keyword: '',
					type: 1
				}
			}).then((res) => {
				this.list = res.data.data;
			});
		},
		// 获取老师列表
		getTeacherList() {
			uni.showLoading({
				title: '加载中...'
			});
			this.$request({
				url: 'wedding/wedding_worker',
				method: 'POST',
				data: {
					shop_id: this.shopId,
					type: this.listIndex + 1,
					user_id: uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0,
					col: 0,
					page: this.page
				}
			}).then((res) => {
				uni.hideLoading();
				if (this.page == 1) {
					this.teacherList = res.data.data.data;
				} else {
					this.teacherList.push(...res.data.data.data);
				}
				this.lastPage = res.data.data.last_page;
			});
		},
		// 选择店铺
		onPicker(e) {
			this.shopId = this.list[e].id;
			this.page = 1;
			this.index = e;
			this.getTeacherList();
		},
		active(index) {
			this.listIndex = index;
			this.page = 1;
			this.getTeacherList();
		},
		onSeeSchedule() {
			uni.navigateTo({
				url: './seeSchedule?shopId=' + this.shopId + '&teacherType=' + this.listIndex
			});
		},
		goSchedule(item) {
			uni.navigateTo({
				url: './lookSchedule?teacherId=' + item.id
			});
		}
	}
};
</script>

<style scoped lang="scss">
.schedule {
	overflow: hidden;

	.tab_nav {
		background-color: #ffffff;
	}

	.header_box {
		height: 140upx;
		padding: 0 200upx 0 220upx;
		box-sizing: border-box;
		overflow: hidden;

		.list_box {
			margin-top: 40upx;

			.active_box {
				width: 90upx;

				.list_txt {
					color: #666666;
				}

				.list_active {
					color: #000000;
				}

				.list_line_box {
					width: 46upx;
					height: 6upx;
					background-color: #000;
					margin: 16upx auto;
				}
			}
		}
	}

	.schedule_box {
		height: 88upx;
		background: linear-gradient(86deg, #eeeeee 0%, rgba(238, 238, 238, 0.52) 100%);
		padding: 14upx 32upx 14upx 32upx;
		box-sizing: border-box;

		.schedule_icon {
			width: 60upx;
			height: 60upx;
		}

		.schedule_txt {
			color: #000;
			margin-top: 14upx;
			margin-left: 20upx;
		}

		.left_jian {
			width: 38upx;
			height: 38upx;
			margin-top: 10upx;
		}
	}

	.bot_list_box {
		padding: 12upx 32upx 0 32upx;
		box-sizing: border-box;

		.list_center {
			// height: 98upx;
			padding: 28rpx 0;
			border-bottom: 2rpx solid #f4f4f4;
			.avatar_box {
				width: 98upx;
				height: 98upx;
				border-radius: 8upx;
				background-color: #999;
			}

			.name_detail_box {
				margin-left: 20upx;

				.name_txt {
					color: #000;
				}

				.detail_txt {
					margin-top: 16upx;
					color: #999;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}

			.detail_box {
				margin-top: 32upx;

				.see_detail_txt {
					color: #999999;
				}

				.left_jian_box {
					width: 24upx;
					height: 24upx;
					margin-top: -6upx;
				}
			}
		}
	}
}
</style>
